/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
.sprites {
    background-image: url(../../images/sprite.png);
    
    
    &.i-app_close_active {
        width: px2rem(40);
        height: px2rem(40);
        background-position: 0 -138/(40-1094)*100%;
        background-size: 180/40*100% 1094/40*100%;
    }
    &.i-comm {
        width: px2rem(180);
        height: px2rem(116);
        background-position: 0 -706/(116-1094)*100%;
        background-size: 180/180*100% 1094/116*100%;
    }
    &.i-commission {
        width: px2rem(31);
        height: px2rem(33);
        background-position: 0 -85/(33-1094)*100%;
        background-size: 180/31*100% 1094/33*100%;
    }
    &.i-free {
        width: px2rem(180);
        height: px2rem(116);
        background-position: 0 -570/(116-1094)*100%;
        background-size: 180/180*100% 1094/116*100%;
    }
    &.i-loading-face {
        width: px2rem(100);
        height: px2rem(100);
        background-position: 0 -330/(100-1094)*100%;
        background-size: 180/100*100% 1094/100*100%;
    }
    &.i-loading {
        width: px2rem(100);
        height: px2rem(100);
        background-position: 0 -450/(100-1094)*100%;
        background-size: 180/100*100% 1094/100*100%;
    }
    &.i-many {
        width: px2rem(180);
        height: px2rem(116);
        background-position: 0 -978/(116-1094)*100%;
        background-size: 180/180*100% 1094/116*100%;
    }
    &.i-open {
        width: px2rem(24);
        height: px2rem(14);
        background-position: 0 0/(14-1094)*100%;
        background-size: 180/24*100% 1094/14*100%;
    }
    &.i-recommend {
        width: px2rem(29);
        height: px2rem(31);
        background-position: 0 -34/(31-1094)*100%;
        background-size: 180/29*100% 1094/31*100%;
    }
    &.i-share-invalid {
        width: px2rem(43);
        height: px2rem(46);
        background-position: 0 -198/(46-1094)*100%;
        background-size: 180/43*100% 1094/46*100%;
    }
    &.i-share {
        width: px2rem(43);
        height: px2rem(46);
        background-position: 0 -264/(46-1094)*100%;
        background-size: 180/43*100% 1094/46*100%;
    }
    &.i-shareQ {
        width: px2rem(180);
        height: px2rem(116);
        background-position: 0 -842/(116-1094)*100%;
        background-size: 180/180*100% 1094/116*100%;
    }
}


